<template>
  <div class="content-tuijian">
    <scroller 
      :on-refresh="refresh"
      :on-infinite="infinite" ref="article_scroller">
      <ul>
        <!-- <li>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/></li> -->
        <li v-for="item in lists" v-bind:key="item.id">
          <div class="img-box"> <router-link :to="{ name: 'articlePage', params: { articleDetail: item.id }}"><img :src="item.url"></router-link></div>
          <div class="msg-box">
            <h3>{{item.title}}</h3>
            <div class="author-msg">
              <div class="author-img"><img src="@/assets/img/rz-tx001.jpg"></div>
              <p class="author-name">{{item.writer}}</p>
              <p class="praise-num">{{item.noteCount}}赞 | {{item.reviewCount}}评论</p>
            </div>
            <p class="article-content" v-html="$options.filters.articleCut(item.abstract)"></p>
          </div>
        </li>
      </ul>
    </scroller>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import VueScroller from "vue-scroller";
Vue.use(VueScroller);

export default {
  name: "ArticleTuiJian",
  data() {
    return {
      lists: [],
      baseUrl: process.env.BASE_URL
    };
  },
  components: {},
  methods: {
    refresh() {
      console.log("refresh");
      this.timeout = setTimeout(() => {
        this.$refs.article_scroller.finishPullToRefresh();
      }, 1500);
    },
    infinite() {
      // this.$refs.article_scroller.resize();
      // console.log("还有更多数据");
      let _this = this;
      this.timeout = setTimeout(() => {
        let start = _this.lists.length;
        this.$axios
          .get(
            "/api/?s=App.Main_Set.GetList&key=articles&app_key=" +
              this.$appKeyWords.app_key
          )
          .then(data => {
            // console.log(data);
            let dataLength = data.data.data.items[0].data.length;
            if (_this.lists.length >= dataLength) {
              _this.$refs.article_scroller.finishInfinite(true);
            } else {
              _this.$refs.article_scroller.finishInfinite(false);
            }
            for (
              let i = start;
              i < (start + 5 < dataLength ? start + 5 : dataLength);
              i++
            ) {
              _this.lists.push(data.data.data.items[0].data[i]);
            }
            // console.log(_this.lists);
          })
          .catch(err => {
            self.fetchError = err;
          });
      }, 1500);
    }
  },
  filters: {
    articleCut(value) {
      if (!value) return "";
      value = value.toString();
      return value.length > 50
        ? value.slice(0, 50) + "..."
        : value.slice(0, 50);
    }
  },
  mounted() {
    // console.log(this.$store.state);
    // console.log(this.$cookies.getCookie("app_rizhi_"));
    // console.log(document.cookie);
    this.$axios
      .get(
        "/api/?s=App.Main_Set.GetList&key=articles&app_key=" +
          this.$appKeyWords.app_key
      )
      .then(data => {
        // console.log(data);
        let dataLength = data.data.data.items[0].data.length;
        for (let i = 0; i < (dataLength < 5 ? dataLength : 5); i++) {
          this.lists.push(data.data.data.items[0].data[i]);
        }
        // console.log(_this.lists);
      })
      .catch(err => {
        self.fetchError = err;
      });
  }
};
</script>
<style scoped lang="scss">
.content-tuijian {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  ul {
    width: 100%;
    overflow: hidden;
    @include setPm(padding, 0, 24, 32, 24);
    box-sizing: border-box;
    li {
      width: 100%;
      float: left;
      text-align: left;
      margin-top: r(24);
      margin-bottom: r(24);
      .img-box {
        width: 100%;
        border-radius: r(12);
        overflow: hidden;
        padding-bottom: 55.5%;
        background: url("~@/assets/img/load-bg.gif") center no-repeat;
        position: relative;
        img {
          width: 100%;
          position: absolute;
          height: 100%;
          top: 0;
          left: 0;
        }
      }
      .msg-box {
        width: 100%;
        h3 {
          font-size: r(36);
          font-weight: bold;
          color: #333;
          line-height: r(88);
        }
        .author-msg {
          width: 100%;
          overflow: hidden;
          color: #999;
          .author-img {
            width: r(40);
            height: r(40);
            display: block;
            border-radius: 100%;
            border: 1px solid #f0f0f0;
            float: left;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p.author-name {
            display: block;
            font-size: r(22);
            float: left;
            @include setPm(margin, 12, 0, 0, 12);
          }
          p.praise-num {
            display: block;
            float: right;
            font-size: r(22);
          }
        }
        p.article-content {
          font-size: r(26);
          color: #666;
          line-height: r(36);
          margin-top: r(20);
        }
      }
    }
  }
}
</style>
